const $ = (s, d = document) => d.querySelector(s);
const dom = {
  star: $(".container.star"),
  smoke: $(".container.smoke"),
  fire: $(".container.fire"),
  weeds: $(".container.weeds"),
  bug: $(".container.bug"),
  bright: $(".container.bright"),
};

const frag1 = document.createDocumentFragment();
const frag2 = document.createDocumentFragment();
const frag3 = document.createDocumentFragment();
const frag4 = document.createDocumentFragment();
const frag5 = document.createDocumentFragment();
const frag6 = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  if (i < 50) {
    const d1 = document.createElement("div");
    d1.classList.add("particle");
    d1.classList.add("star-particle");
    frag1.appendChild(d1);
    if (i < 4) {
      const d5 = document.createElement("div");
      d5.classList.add("particle");
      d5.classList.add("bug-particle");
      d5.style.transform = `translateX(${i + 1}rem)`;
      d5.style.transformOrigin = `${Math.random() * 4}rem ${
        Math.random() * 2 - 4
      }rem`;
      d5.style.setProperty("--delay", `${Math.random() * 200 * -1}ms`);
      d5.style.setProperty("--speed", `${Math.random() * 400 + 700}ms`);
      frag5.appendChild(d5);
    }
    const d6 = document.createElement("div");
    d6.classList.add("particle");
    d6.classList.add("bright-particle");
    frag6.appendChild(d6);
  }
  const d2 = document.createElement("div");
  d2.classList.add("particle");
  d2.classList.add("smoke-particle");
  frag2.appendChild(d2);
  const d3 = document.createElement("div");
  d3.classList.add("particle");
  d3.classList.add("fire-particle");
  frag3.appendChild(d3);
  const d4 = document.createElement("div");
  d4.classList.add("particle");
  d4.classList.add("weed");
  frag4.appendChild(d4);
}

dom.star.appendChild(frag1);
dom.smoke.appendChild(frag2);
dom.fire.appendChild(frag3);
dom.weeds.appendChild(frag4);
dom.bug.appendChild(frag5);
dom.bright.appendChild(frag6);
